<template>
    <div class="order">
        <breadcrumb :routerList="routerList"></breadcrumb>
        <div class="box">
			<el-row :gutter="15">
                <el-col :span="3">
                    <el-select v-model="statusLabel"  placeholder="请选择订单状态" @change="statusChange">
                        <el-option
                                v-for="item in statusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <div class="block">
                        <el-date-picker
                                v-model="timeVal"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions"
                            @change="pickTime"
                        >
                        </el-date-picker>
                    </div>
                </el-col>
				<el-col :span="3">
					<el-input v-model="fx_user_shop_id" placeholder="请输店铺ID" clearable></el-input>
				</el-col>
				<el-col :span="3">
					<el-input v-model="order_num" placeholder="请输入订单编号" clearable></el-input>
				</el-col>
                <el-col :span="2" >
                    <el-button type="primary" @click="searchBtn" icon="el-icon-search">检索</el-button>
                </el-col>
				<el-col :span="2" :offset="5">
					<el-button type="primary" @click="exportExcel" icon="el-icon-download">导出</el-button>
				</el-col>
			</el-row>
        </div>
        <div class="table">
            <el-table
                    :data="orderList"
                    style="width: 100%"
                    :row-style="{cursor:'pointer'}"
                    row-key="id"
                    border
                    :height="getWinHeight"
                    highlight-current-row
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                        prop="order_num"
                        label="订单编号"
                        width="160">
                </el-table-column>
				<el-table-column
					label="商品信息"
					width="400"
				>
					<template scope="scope">
						<div v-for="(item,index) in scope.row.content" :key="index" class="product-info">
							<div class="info-img"><img :src="item.head_img" alt="" ></div>
							<div class="info-content">
								<p>商品名称：{{item.product_name}}</p>
								<p>商品单价：¥{{item.price}}</p>
								<p>购买数量：{{item.num}}；  单位：{{item.unit}} </p>
							</div>
						</div>
					</template>
				</el-table-column>
                <el-table-column
                        prop="all_price"
						width="100"
                        label="订单价格"
                        >
                </el-table-column>
                <el-table-column
                        label="收货信息"
                        width="300"
                        >
						<template scope="scope">
							<p>{{scope.row.name}}   <span style="margin-left: 15px;">{{scope.row.phone}}</span></p>
							<p>地址：{{scope.row.sheng+scope.row.shi+scope.row.qu+scope.row.address}}</p>
						</template>
                </el-table-column>
                <el-table-column
                        prop="createtime"
                        label="下单时间"
                width="140">
                    <template scope="scope">
                        <span>{{$util.timeStampToTime(scope.row.createtime)}}</span>
                    </template>
                </el-table-column>
				<el-table-column
					label="小店名称"
					width="200"
				>
					<template scope="scope">
						<p v-if="scope.row.shop_content"><img :src="scope.row.shop_content.head_img" class="shop-img" alt="">{{scope.row.shop_content.shop_name}}</p>
						<p v-else>--</p>
					</template>
				</el-table-column>
                <el-table-column
                        prop="status"
                        label="订单状态"
						width="100">
                    <template scope="scope">
                        <el-tag size="mini" v-if="scope.row.status == 0" type="info" effect="dark">待支付</el-tag>
                        <el-tag size="mini" v-if="scope.row.status == 1" type="warning" effect="dark">待发货</el-tag>
                        <el-tag size="mini" v-if="scope.row.status == 2" type="primary" effect="dark">待收货</el-tag>
                        <el-tag size="mini" v-if="scope.row.status == 3" type="success" effect="dark">已完成</el-tag>
                        <el-tag size="mini" v-if="scope.row.status == 4" effect="dark">失效</el-tag>
                        <el-tag size="mini" v-if="scope.row.status == 5" type="danger" effect="dark">申请退款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                >
                    <template scope="scope">
                        <el-button @click="toCheck(scope.$index,scope.row)" size="mini">查看</el-button>
                        <el-button @click="sendGoods(scope.$index,scope.row)" v-if="scope.row.status == 1" size="mini">确认发货</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
		<el-row type="flex" :gutter="20">
			<el-col :span="6" class="total-price">合计订单金额：<span>{{totalPrice|formatPrice}} 元</span></el-col>
			<el-col :span="18">
				<paginationSizeChange :total="total" @sizeChange="sizeChange" @currentPage="currentPage"></paginationSizeChange>
			</el-col>
		</el-row>
    </div>
</template>

<script>
    import breadcrumb from '@/components/breadcrumb.vue'
    // import paginationAre from '@/components/paginationAre.vue'
	import paginationSizeChange from '@/components/paginationSizeChange.vue'
    export default {
        name: "order",
        components:{breadcrumb,paginationSizeChange},
        data(){
            return {
                express:'',
                express_num:'',
                routerList:[
                    {
                        path:'',
                        name:'订单管理'
                    },
                    {
                        path:'/fx_self_order',
                        name:'会员个人订单列表'
                    },
                ],
                timeVal:'',
                timeArr:[],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                    ,
                    disabledDate(time){
                        return time.getTime()>Date.now()
                    }
                },
                orderList:[],
                total:0,
                supplier:'',
                supplier_id:'',
                status:10,
                statusLabel:'',
                page:1,
				pageNum:this.$store.state.pageNum,
                supplier_list:[],
				phone:'',
				fx_user_shop_id:'',
				order_num:'',
				totalPrice:0,
                statusList:[
                    {
                        label:'全部',
                        value:10
                    },
                    {
                        label:'待支付',
                        value:0
                    },
                    {
                        label:'待发货',
                        value:1
                    },
                    {
                        label:'待收货',
                        value:2
                    },
                    {
                        label:'完成',
                        value:3
                    },
                    {
                        label:'失效',
                        value:4
                    },
                ]


            }
        },
        beforeCreate(){

        },
        created(){
            this.supplier_id = this.$store.state.supplier_id;
            if(this.$route.query.status != undefined){
                this.status = this.$route.query.status
            }
            for(let i in this.statusList){
                if(this.status == this.statusList[i].value){
                    this.statusLabel = this.statusList[i].label;
                }
            }
			if(this.$route.query.fx_id){
				this.fx_user_shop_id = this.$route.query.fx_id
			}
            this.getOrderList()
        },
        computed:{
            getWinHeight(){
                let winHeight = document.body.clientHeight;
                return winHeight - 260
            }
        },
		filters:{
			formatPrice:function(value){
				let reg=/(\d)(?=(?:\d{3})+\b)/g
				let str = value.toString()
				return  str.replace(reg,'$1,')
			}
		},
        methods:{
			async getOrderList(){
				let res = await this.$Http.getFxUserOrder({
					p:this.page,
					num:this.pageNum,
					start_time:this.timeArr[0],
					end_time:this.timeArr[1],
					user_shop_id:this.fx_user_shop_id,
					status:this.status,
					order_num:this.order_num
				})
				console.log(res)
				if(res){
					this.orderList = res.list;
					this.total = Number(res.count);
					let total_price = 0;
					for(let i in res.list){
						total_price += parseFloat(res.list[i].all_price)
					}
					this.totalPrice = total_price
				}
			},
			//订单状态选择
            statusChange(value){
                this.status = value
            },
			//搜索按钮
            searchBtn(){
                this.getOrderList();
            },
            toCheck(index,row){
                console.log(index)
                this.$router.push({
                    path: '/fx_order_details',
                    query: {
                        id: row.id
                    }
                })
            },
            pickTime(){
                let timeArr = []
				console.log(this.timeVal)
                for(let i in this.timeVal){
                    let time = this.timeVal[i];
                    let year = time.getFullYear();
                    let month = this.$util.checkTime(time.getMonth() + 1);
                    let day = this.$util.checkTime(time.getDate());
                    let stamp = '';
                    if(i == 0){
                       stamp = this.$util.timeToTimestamp(`${year}-${month}-${day} 00:00:00`);
                       timeArr.push(stamp)
                    }
                    if(i == 1){
                        stamp = this.$util.timeToTimestamp(`${year}-${month}-${day} 23:59:59`);
                        timeArr.push(stamp)
                    }
                }
                this.timeArr = timeArr
            },
            currentChange(currentPage){
                this.page = currentPage
                this.getOrderList()
            },
            sendGoods(index,row){
                console.log(index,row);
                let html = `<div class="msg-div" style="margin-top:10px;display: flex;flex-flow: row nowrap;align-items: center">
                                <span>快递公司：</span>
                                <input
                                    placeholder="请输入快递公司"
                                    v-model="express"
                                    class="express"
                                    style="flex:1;height:30px;border-radius:5px;outline-color: #3a8ee6;border:1px solid #3a8ee6;box-sizing: border-box;padding:0 5px; ">
                                </div>
                            <div class="msg-div" style="margin-top:10px;display: flex;flex-flow: row nowrap;align-items: center">
                                <span>快递单号：</span>
                                <input
                                    placeholder="请输入快递单号"
                                    v-model="express_num"
                                    class="express_num"
                                    style="flex:1;height:30px;border-radius:5px;outline-color: #3a8ee6;border:1px solid #3a8ee6;box-sizing: border-box;padding:0 5px;">
                                </div>`;
                this.$confirm(html,'发货信息',{
                    dangerouslyUseHTMLString:true,
                    confirmButtonText:'提交',
                    cancelButtonText:'取消'
                }).then(()=>{
                    let experss = document.getElementsByClassName('express')[0].value
                    let experss_num = document.getElementsByClassName('express_num')[0].value
                    this.express = experss;
                    this.express_num = experss_num;
                    this.expressNum(row.id)
                }).catch(()=>{
                    // console.log('取消');
                })
            },
			//确认发货
            async expressNum(id){
                console.log(this.express_num);
                let res = await this.$Http.expressNum({
                    id:id,
                    express:this.express,
                    express_num:this.express_num
                })
                console.log(res);
                if(res.code == 200){
                    this.$message.success('快递信息录入！');
                    this.getOrderList()
                }
            },
			//分页条数设置
			sizeChange(val){
				this.pageNum = val;
				this.getOrderList()
			},
			//分页页数
			currentPage(val){
				this.page = val;
				this.getOrderList()
			},
			//导出表格
			exportExcel(){
                let tableheader = ['订单号','商品名称','商品单价','购买数量','订单价格','收货人','电话','地址','下单时间','小店名称','用户备注','订单状态'];
                let data = [];
                let pro = '个人店铺订单列表';
                let list = this.orderList;
                for(let i in list){
                    let arr = [];
                    let product_name = '';
                    let price = "";
                    let num = ""
                    for(let j in list[i].content){
                        product_name += `  ${list[i].content[j].product_name}`
                        price += `  ${list[i].content[j].price}`
                        num += `  ${list[i].content[j].num}`
                    }
                    let address = list[i].sheng + list[i].shi + list[i].qu +list[i].address;
                    let time = this.$util.timeStampToTime(list[i].createtime)
                    let fx_name = list[i].shop_content.shop_name
                    let status = list[i].status == 0?'待支付':(list[i].status == 1?'待发货':(list[i].status == 2?'待收货':(list[i].status == 3?'完成':(list[i].status == 4?'失效':'其他'))))
                    arr.push(list[i].order_num,product_name,price,num,list[i].all_price,list[i].name,list[i].phone,address,time,fx_name,list[i].beizhu,status)
                    data.push(arr);
                }
                this.$util.exportExcel01(tableheader,pro,data)
            },
        }
    }
</script>

<style scoped>
    .box{
        width: 100%;
        height: 60px;
        background: white;
        margin: 20px 0;
        padding: 10px 10px;
        box-sizing: border-box;
		color:#aaa;
    }
    .msg-div{
        width: 100%;
        font-size: 12px;
        color:#aaa;
        margin-top: 10px;
    }
	.shop-img{
		margin-right: 15px;
		width: 30px;
		height:30px;
		vertical-align: middle;
		border-radius: 50%;
	}
	.product-info{
		width: 100%;
		display: flex;
		flex-flow:row nowrap;
		align-items: center;
		border-bottom:1px dotted #aaa;
	}
	.product-info:last-child{
		border:none;
	}
	.info-img{
		width: 80px;
	}
	.info-img img{
		width: 100%;
	}
	.info-content{
		font-size: 12px;
		flex:1;
		padding:0 5px;
		box-sizing: border-box;
	}
	.info-content p{
		line-height: 20px;
		margin-bottom:5px;
		margin-top: 0;
	}
	.total-price{
		font-size: 14px;
		color:#888;
		line-height: 50px;
	}
	.total-price span{
		font-size: 18px;
		font-weight: blod;
		color:#E6A23C;
	}
	.el-date-editor--daterange.el-input__inner{
		width:100%;
	}
</style>
